<template>
    <div class="content-box">
        <div class="container">
            <div id="great">
                <div id="builiding" style="overflow:hidden;height:1000px;width:100%">
                    <iframe
                        src="http://backtest.10jqka.com.cn/backtest/app.html#/strategybacktest"
                        id="mobsf"
                        style="position:relative;left:-170px;top:-140px;right:-200px;bottom:300px;overflow:hidden;width:1000px;transform:scale(0.9);"
                    ></iframe>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'huice.vue',
    data() {
        return {};
    },
    mounted() {
        /**
         * iframe-宽高自适应显示
         */
        function changeMobsfIframe() {
            const mobsf = document.getElementById('mobsf');
            const deviceWidth = document.body.clientWidth;
            const deviceHeight = document.body.clientHeight;
            mobsf.style.width = Number(deviceWidth) + 20 + 'px'; //数字是页面布局宽度差值
            mobsf.style.height = Number(deviceHeight) + 450 + 'px'; //数字是页面布局高度差
        }

        changeMobsfIframe();

        window.onresize = function() {
            changeMobsfIframe();
        };
    }
};
</script>

<style scoped>
.great {
    /* background: url('../assets/banner.jpg') no-repeat; */
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
    top: 0;
    border-width: 0 0 1px;
}
#building {
    top: 0;
    border-width: 0 0 1px;
    overflow: hidden;
}
</style>
